<template>
  <div class="page-edit">
    <header>
      <i style="font-size: 18px; cursor: pointer; margin-right: 8px" class="el-icon-arrow-left" @click="goBack"></i>
      <span>新增特殊作业</span>
    </header>
    <section class="edit-body">
      <div class="form-page">
        <p class="title-level2">基本信息</p>
        <el-form ref="form" :model="form" :rules="rules" label-width="200px">
          <el-row>
            <el-col :span="item.span" v-for="(item, index) in formList" :key="index">
              <!-- input -->
              <el-form-item v-if="item.type == 'input'" :label="item.label" :prop="item.prop">
                <el-input 
                  :maxlength="50" 
                  style="width: 100%" 
                  v-model="form[item.prop]"
                  :placeholder="'请输入' + item.label"
                />
              </el-form-item>
              <!-- select -->
              <el-form-item 
                v-if="item.type == 'select'"
                style="width: 100%" 
                :label="item.label" 
                :prop="item.prop">
                <el-select 
                  v-model="form[item.prop]" 
                  :placeholder="'请选择' + item.label"
                  @change="(val) => handleSelChange(val, item)"
                  >
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <!-- select-tree -->
              <el-form-item 
                v-if="item.type == 'select-tree'"
                style="width: 100%"  
                :label="item.label" 
                :prop="item.prop">
                <treeselect 
                  v-model="form[item.prop]" 
                  :options="infoOptions" 
                  :normalizer="normalizer"
                  placeholder="请选择行政区域" 
                />
              </el-form-item>
              <!-- inputNumber -->
              <el-form-item 
                v-if="item.type == 'inputNumber'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  style="width: 100%" 
                  type="number" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" 
                />
              </el-form-item>
              <!-- textarea -->
              <el-form-item 
                v-if="item.type == 'textarea'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  type="textarea" 
                  :rows="3" 
                  :maxlength="300"
                  :show-word-limit="true"
                  style="width: 100%" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" />
              </el-form-item>
              <!-- image -->
              <el-form-item 
                v-if="item.type == 'upload' && !isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-image style="width: 150px; height: 150px" v-for="ele in form[item.prop]
                  ? JSON.parse(form[item.prop])
                  : []" :key="ele.url" :src="ele.url" fit="fit">
                </el-image>
              </el-form-item>
              <!-- upload
              <el-form-item 
                v-if="item.type == 'upload' && isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-upload 
                  :action="uploadAction" 
                  :headers="uploadHeaders" 
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview" 
                  :on-remove="handleRemove" 
                  accept="image/jpeg,image/gif,image/png"
                  :limit="3" 
                  :file-list="fileLists" 
                  :on-success="(file, fileList) => uploadSuccess(file, fileList, item, index)" 
                  :on-exceed="handleExceed">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible="uploadVisible" @close="() => (uploadVisible = false)">
                  <img width="100%" :src="uploadImageUrl" alt="" />
                </el-dialog>
              </el-form-item> -->
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="form-page">
        <p class="title-level2">基本信息</p>
        <el-form ref="form" :model="form" :rules="rules" label-width="200px">
          <el-row>
            <el-col :span="item.span" v-for="(item, index) in formList" :key="index">
              <!-- input -->
              <el-form-item v-if="item.type == 'input'" :label="item.label" :prop="item.prop">
                <el-input 
                  :maxlength="50" 
                  style="width: 100%" 
                  v-model="form[item.prop]"
                  :placeholder="'请输入' + item.label"
                />
              </el-form-item>
              <!-- select -->
              <el-form-item 
                v-if="item.type == 'select'"
                style="width: 100%" 
                :label="item.label" 
                :prop="item.prop">
                <el-select 
                  v-model="form[item.prop]" 
                  :placeholder="'请选择' + item.label"
                  @change="(val) => handleSelChange(val, item)"
                  >
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
              <!-- select-tree -->
              <el-form-item 
                v-if="item.type == 'select-tree'"
                style="width: 100%"  
                :label="item.label" 
                :prop="item.prop">
                <treeselect 
                  v-model="form[item.prop]" 
                  :options="infoOptions" 
                  :normalizer="normalizer"
                  placeholder="请选择行政区域" 
                />
              </el-form-item>
              <!-- inputNumber -->
              <el-form-item 
                v-if="item.type == 'inputNumber'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  style="width: 100%" 
                  type="number" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" 
                />
              </el-form-item>
              <!-- textarea -->
              <el-form-item 
                v-if="item.type == 'textarea'" 
                :label="item.label" 
                :prop="item.prop">
                <el-input 
                  type="textarea" 
                  :rows="3" 
                  :maxlength="300"
                  :show-word-limit="true"
                  style="width: 100%" 
                  v-model="form[item.prop]" 
                  :placeholder="'请输入' + item.label" />
              </el-form-item>
              <!-- image -->
              <el-form-item 
                v-if="item.type == 'upload' && !isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-image style="width: 150px; height: 150px" v-for="ele in form[item.prop]
                  ? JSON.parse(form[item.prop])
                  : []" :key="ele.url" :src="ele.url" fit="fit">
                </el-image>
              </el-form-item>
              <!-- upload
              <el-form-item 
                v-if="item.type == 'upload' && isEdit" 
                :label="item.label" 
                :prop="item.prop">
                <el-upload 
                  :action="uploadAction" 
                  :headers="uploadHeaders" 
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview" 
                  :on-remove="handleRemove" 
                  accept="image/jpeg,image/gif,image/png"
                  :limit="3" 
                  :file-list="fileLists" 
                  :on-success="(file, fileList) => uploadSuccess(file, fileList, item, index)" 
                  :on-exceed="handleExceed">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible="uploadVisible" @close="() => (uploadVisible = false)">
                  <img width="100%" :src="uploadImageUrl" alt="" />
                </el-dialog>
              </el-form-item> -->
            </el-col>
          </el-row>
        </el-form>
      </div>
    </section>
    <footer>
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </footer>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      isEdit:true,
      form:{},
      rules:{},
      formList: [
        {
            label: "塔基名称",
            prop: "name",
            span: 8,
            type: "input",
        },
        {
            label: "位置",
            prop: "position",
            span: 8,
            type: "input",
        },
        {
            label: "塔基名称",
            prop: "name",
            span: 8,
            type: "input",
        },
        {
            label: "位置",
            prop: "position",
            span: 8,
            type: "input",
        },
        {
            label: "塔基名称",
            prop: "name",
            span: 8,
            type: "input",
        },
        {
            label: "位置",
            prop: "position",
            span: 8,
            type: "input",
        },
        {
            label: "塔基名称",
            prop: "name",
            span: 8,
            type: "input",
        },
        {
            label: "位置",
            prop: "position",
            span: 8,
            type: "input",
        },
        {
            label: "行政区域",
            prop: "administrativeArea",
            span: 8,
            type: "select-tree",
        },
        {
            label: "路线",
            prop: "lineId",
            span: 8,
            type: "select",
            selList: [],
        },
        {
            label: "高度(m)",
            prop: "height",
            span: 8,
            type: "input",
        },
        {
            label: "占地面积(m²)",
            prop: "coverArea",
            span: 8,
            type: "input",
        },
        {
            label: "简介",
            prop: "introduce",
            span: 16,
            type: "textarea",
        },
        {},
        {
            label: "行政区域",
            prop: "administrativeArea",
            span: 8,
            type: "select-tree",
        },
        {
            label: "路线",
            prop: "lineId",
            span: 8,
            type: "select",
        },
        {
            label: "高度(m)",
            prop: "height",
            span: 8,
            type: "input",
        },
      ],
      infoOptions: [],
      options:[],
    }
  },
  methods: {
    goBack() {
      // this.$router.go(-1)
      this.$emit('close')
    },
    handleSelChange(value, item) {
      console.log('value',item);
      this.$forceUpdate();
      this.form[item]=value;
    },
    /** 转换行政区域信息数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
          delete node.children;
      }
      return {
          id: node.id,
          label: node.name,
          children: node.children,
      };
    },
  }
}
</script>
<style scoped>
</style>

